<template>
  <div class="top-nav">
    <h1>{{title}}</h1>
        <el-menu default-active="1"  :collapse="isCollapse">
           <el-submenu index="1">
             <template slot="title">今日好评</template>
              <el-menu-item index="1-2" @click="aboutVisible = true">关于我们</el-menu-item>
              <el-menu-item index="1-2" @click="goto('rate')">返回主页</el-menu-item>
              <el-menu-item index="1-3" @click="goto('/login')">退出</el-menu-item>
              </el-submenu>
        </el-menu>
        <el-dialog
            title="关于我们"
            :visible.sync="aboutVisible"
            width="80%"
            center
            :modal-append-to-body="false">
            <h3>业务咨询, 微信</h3>
            <ul>
              <li>通用行业数据挖掘</li>
              <li>用户满意度调查</li>
              <li>业务缺陷发现及改进</li>
            </ul>
            <span slot="footer" class="dialog-footer">
              <el-button type="primary" @click="aboutVisible = false">确 定</el-button>
            </span>
          </el-dialog>
    </div>
</template>
<script>
export default {
  data() {
    return {
      aboutVisible: false,
      isCollapse: false
    };
  },
  computed: {
    title() {
      let userInfo = JSON.parse(sessionStorage.getItem("user"));
      return userInfo.branchName || userInfo.shopName;
    }
  },
  methods: {
    goto(path) {
      this.$router.push(path);
    }
  }
};
</script>
<style lang="scss" scoped>
.top-nav {
  // position: fixed;
  // top: 0;
  // right: 0;
  display: flex;
  justify-content: space-between;
  margin-right: -20px;
}
.el-menu {
  z-index: 1;
}
</style>


